<template>
    <div class="navigation">
        <a class="mc">菜单栏</a>
        <a class="data" v-for="data in navigationData"
           v-bind:key="data.id">{{data.text}}</a>
    </div>
</template>

<script>
    export default {
        name: "Navigation",
        props: {
            navigationData: Array
        }
    }
</script>

<style scoped>
    div {
        width: 100px;
    }

    .mc {
        background-color: pink;
        display: block;
    }

    .data {
        display: none;
        background-color: beige;
    }

    .data:hover {
        background-color: #42b983;
        font-size: larger;
    }

    .navigation:hover .data {
        display: block;
    }


</style>